<app-public-tab-user class="public-tab-user" [ngClass]="{'right-full':isActive, 'right-off':!isActive }"></app-public-tab-user>
<!-- contain BEGIN -->
<div class="right-product right-full background-input animate-time right-product-user" [ngClass]="{ 'right-full': isActive , 'right-off': !isActive }">
    <!-- [ngClass]="{ 'right-full': isActive , 'right-off': !isActive }" -->
    <div class="relative">
        <div class="center-back right-back">
            
            <!-- <app-breadcrumb [breadcrumbInfo]="{ 'secondLevel' : '角色管理', 'threeLevel' : '角色组管理' }"></app-breadcrumb> -->

            <!-- 操作 BEGIN -->
            <div class="button-group">
                <button type="button" class="btn btn-blue " mat-button data-toggle="modal" data-target="#add" *ngIf="right['roles']['create']">
                    <span class="glyphicon glyphicon-plus"></span> 新增
                </button>
                <button type="button" class="btn btn-orange" mat-button (click)="deletes()" *ngIf="right['roles']['batchDelete']" [disabled]="isSelect"(click)="reduction()">
                    <span class="glyphicon glyphicon-trash"></span> 批量删除
                </button>

                <div class="input-group pull-left search-width" *ngIf="right['roles']['query']">
                    <input type="text" class="form-control search-input" placeholder="请输入角色组名称、描述搜索" [(ngModel)]="searchData.queryCriteria" (input)="changesearch()" (keyup.enter)="changesearch()">
                    <button class="btn btn-search btn-blue" (click)="search()"mat-button>查询</button>
                </div>
            </div>
            <!-- 操作 END -->
            <div class="container-fluid">
                <div class="info-center">
                    <!-- 角色组列表内容 BEGIN -->
                    <div class="contain">
                        <div class="clearfix"></div>
                        <app-roles-table #rolesTable 
                                         [tableNumber]="tableNumber" 
                                         [searchData]="searchData.queryCriteria"
                                         (tabeListOutput)="ParentList($event)" 
                                         (detailsOutput)="ParentDetails($event)" 
                                         (isSelectFromTable)="isSelectFromTableHandler($event)"
                                         >
                        </app-roles-table>
                    </div>
                    <!-- 角色组列表内容 BEGIN -->

                </div>
                <app-pagination [getTotalItems]="totalItems" (isLoadTableFromPagination)="isLoadTableFromPaginationHandler($event)"></app-pagination>
            </div>
        </div>
    </div>
</div>
<!-- contain END -->

<!--add-->
<app-roles-add (addOutput)="ParentAdd($event)"></app-roles-add>
<!--add end-->

<!--details-->
<app-roles-details [getTabVal]="tabVal"></app-roles-details>
<!--details end-->

<!-- 删除 BEGIN -->
<app-roles-delete (deleteOutput)="ParentDelete($event)"></app-roles-delete>
<!-- 删除 END -->